<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>事件绑定</title>
    <style>
      .container {
        width: 200px;
        height: 200px;
        background-color: #f66;
      }
      .box {
        width: 100px;
        height: 100px;
        background-color: #0f0;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!-- 内联处理器：使用表达式，不使用js方法，类似alert以及console可以在方法事件处理器中使用 -->
      <button @click="count+=2">+2</button>
      <button @click="count++">+1</button>

      <!-- alert is not a function -->
      <button @click="alert(1)">弹出提示</button>
      <!-- Cannot read properties of undefined  -->
      <button @click="console.log(1)">打印提示</button>

      {{ count }}
      <div>
        <!-- 方法事件处理器      $event 特殊变量，主动传递函数-->
        <button @click="add">加10</button>
        <button @click="addFn(5,$event)">加参数</button>
        {{num}}
      </div>

      <!-- 事件修饰符 -->
      <form @submit.prevent>
        <input type="text" name="username" placeholder="用户名" />
        <input type="submit" value="提交" />
      </form>

      <div class="container" @click="print('container')">
        <div class="box" @click="print('box',$event)"></div>
      </div>

      <div class="container" @click="printFn('container')">
        <div class="box" @click="printFn('box')"></div>
      </div>

      <!-- 按键修饰符 输入菜单 -->
      <input type="text" @keyup="output" />
      <input type="text" @keyup.enter="outputFn" />
      <!-- vue2可以使用keyCode值作为修饰符 -->
      <input type="text" @keyup.13="outputFn" />

      <!-- 系统修饰按键 -->
      <div>
        <input type="text" @keyup.alt.enter="systemOutput" />
      </div>

      <!-- 多事件绑定 -->
      <div>
      <button @click="addNum(4)">+4</button>
      <button @click="jian">--</button>
      <button @click="addNum(5)">+5</button>
      <button @click="addNum(6)">+6</button>
      <button @click="addNum(7)">+7</button>
      <button @click="addNum(8)">+8</button>
      <p>当前的值为{{count}}</p>
      <div>
    </div>

    <script src="../lib/vue.global.js"></script>
    <script>
      Vue.createApp({
        data() {
          return {
            count: 10,
            num: 50,
          };
        },
        methods: {
          add(event) {
            console.log(event);
            this.num += 10;
          },
          addFn(params, event) {
            console.log(event);
            this.num += params;
          },
          print(params, event) {
            if (event) {
              event.stopPropagation();
            }
            console.log(params);
          },
          printFn(params) {
            console.log(params);
          },
          outputFn() {
            console.log("11111");
          },
          systemOutput() {
            console.log("2222");
          },
          addNum(num) {
            this.count = this.count + num;
          },
          jian(count){
            this.count--;
          }
        },
      }).mount("#app");
    </script>
  </body>
</html>
